<template>
  <div>
    <div class="layout-padding w25" style="padding-right: 0 !important">
      <div class="layout-padding-auto layout-padding-view" style="overflow: auto;">
        <el-row>
          <el-form :inline="true" :model="queryForm">
            <el-row>
              <el-form-item prop="medicalCard" label="社保卡号：">
                <el-input v-model="queryForm.medicalCard" placeholder="请输入社保卡号"/>
              </el-form-item>
              <el-form-item prop="icCard" label="身份证号：">
                <el-input v-model="queryForm.icCard" placeholder="请输入身份证号"/>
              </el-form-item>
              <el-form-item>
                <el-button icon="search" @click="searchData" type="primary">
                  查询
                </el-button>
                <el-button @click="readCard" plain icon="CreditCard" type="primary">
                  读卡
                </el-button>
                <el-button icon="Refresh" @click="resetQuery">
                  重置
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <el-divider content-position="center">基础信息</el-divider>
          <el-form :inline="true" :model="queryForm">
            <el-row>
              <el-form-item prop="name">
                <template v-slot:label>
                  <span class="strong-text-label">姓名：</span>
                </template>
                <span class="strong-text-content">{{ queryForm.name }}</span>
              </el-form-item>
              <el-col :span="12">
                <el-form-item prop="age">
                  <template v-slot:label>
                    <span class="strong-text-label">年龄：</span>
                  </template>
                  <span class="strong-text-content">{{ queryForm.age }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="birthday">
                  <template v-slot:label>
                    <span class="strong-text-label">出生日期：</span>
                  </template>
                  <span class="strong-text-content">{{ queryForm.birthday?.substring(0, 11) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="sex">
                  <template v-slot:label>
                    <span class="strong-text-label">性别：</span>
                  </template>
                  <span class="strong-text-content">
                    <dict-tag :options="gender" :value="queryForm.sex"></dict-tag>
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="healthStatus">
                  <template v-slot:label>
                    <span class="strong-text-label">管理状态：</span>
                  </template>
                  <span class="strong-text-content">
                  <dict-tag :options="bloodx_health" :value="queryForm.healthStatus"></dict-tag>
                  </span>
                </el-form-item>
              </el-col>
              <el-form-item prop="tel" label="">
                <template v-slot:label>
                  <span class="strong-text-label">联系电话：</span>
                </template>
                <span class="strong-text-content">
                {{ queryForm.tel }}
                </span>
              </el-form-item>
              <el-col :span="12">
                <el-form-item prop="familyDoctor">
                  <template v-slot:label>
                    <span class="strong-text-label">家庭医生：</span>
                  </template>
                  <span class="strong-text-content">
                  <template v-for="item in doctorList">
                    {{ item.userId === queryForm.familyDoctor ? item.name : '' }}
                  </template>
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="village">
                  <template v-slot:label>
                    <span class="strong-text-label">村：</span>
                  </template>
                  <span class="strong-text-content">
                  <template v-for="item in village">
                    {{ item.id === queryForm.village ? item.name : '' }}
                  </template>
                  </span>
                </el-form-item>
              </el-col>
              <el-form-item prop="address">
                <template v-slot:label>
                  <span class="strong-text-label">地址：</span>
                </template>
                <span class="strong-text-content">
                {{ queryForm.address }}
                </span>
              </el-form-item>
            </el-row>
          </el-form>
          <el-divider content-position="center">常规信息</el-divider>
          <el-form :inline="true" :model="queryForm">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="height">
                  <template v-slot:label>
                    <span class="strong-text-label">身高/cm：</span>
                  </template>
                  <span class="strong-text-content">
                  {{ queryForm.height }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="weight">
                  <template v-slot:label>
                    <span class="strong-text-label">体重/kg：</span>
                  </template>
                  <span class="strong-text-content">
                  {{ queryForm.weight }}
                  </span>
                </el-form-item>
              </el-col>
              <el-form-item prop="bmi">
                <template v-slot:label>
                  <span class="strong-text-label">BMI：</span>
                </template>
                <span class="strong-text-content">
                {{ queryForm.bmi }}
                </span>
              </el-form-item>
              <el-col :span="12">
                <el-form-item prop="diastolicPressure">
                  <template v-slot:label>
                    <span class="strong-text-label">舒张压/mmHg：</span>
                  </template>
                  <span class="strong-text-content">
                  {{ queryForm.diastolicPressure }}
                 </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="systolicPressure">
                  <template v-slot:label>
                    <span class="strong-text-label">收缩压/mmHg：</span>
                  </template>
                  <span class="strong-text-content">
                  {{ queryForm.systolicPressure }}
                 </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </div>

    <div class="layout-padding w75" style="left: 25%">
      <div class="layout-padding-auto layout-padding-view" style="overflow: auto;">

        <blood-view ref="bloodViewRef"/>
        <drug-view ref="drugViewRef"/>
        <room-view ref="roomViewRef"/>
        <exam-view ref="examViewRef"/>
        <illness-view ref="illnessViewRef" style="margin-bottom: 60px"/>
        <div
            style="text-align:right;padding:10px 0;position: absolute;bottom: 5px;left: 15px;background:#FFF;width:calc(100% - 30px);z-index: 999;box-shadow: var(--el-box-shadow-light)">
          <el-button type="primary" size="large" @click="submitBtn" style="margin-right: 10px">
            确认提交
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="bloodMedicalView">
import {useMessage} from "/@/hooks/message";
import {useDict} from '/@/hooks/dict';
// 定义字典
const {gender, bloodx_health} = useDict('gender', 'bloodx_health', 'village', 'family_doctor');


const IllnessView = defineAsyncComponent(() => import('./illnessView.vue'));
import DrugView from "/@/views/blood/bloodMedicalView/drugView.vue";
import BloodView from "/@/views/blood/bloodMedicalView/bloodView.vue";
import ExamView from "/@/views/blood/bloodMedicalView/examView.vue";
import RoomView from "/@/views/blood/bloodMedicalView/roomView.vue";
import {getCustomerByCard, sysVillageList} from "/@/api/blood/bloodxCustomer";
import {getDoctorList} from "/@/api/information/village";


const illnessViewRef = ref();
const drugViewRef = ref();
const roomViewRef = ref();
const bloodViewRef = ref();
const examViewRef = ref();

const doctorList = ref<any[]>([]);
const village = ref([]);
const readCardWs = ref(null);

const queryForm = ref({
  medicalCard: '',
  icCard: '',
  name: '',
  age: '',
  birthday: '',
  sex: '',
  tel: '',
  address: '',
  village: '',
  healthStatus: '',
  familyDoctor: '',
  height: '',
  weight: '',
  bmi: '',
  customerId: '',
  diastolicPressure: '', // 舒张压
  systolicPressure: '', // 收缩压
})


const getdoctorList = () => {
  getDoctorList().then((res) => {
    doctorList.value = res.data;
  });

  sysVillageList().then((res) => {
    village.value = res.data;
  });
};


const submitBtn = () => {
  drugViewRef.value.submitData()
}

const sendReadCard = (WSURL, callback) => {
  if (readCardWs.value !== null) {
    if (
        readCardWs.value.readyState === 0 ||
        readCardWs.value.readyState === 1
    ) {
      return;
    } else {
      readCardWs.value.close();
    }
  }
  readCardWs.value = new WebSocket(WSURL);
  readCardWs.value.addEventListener("open", () => {
    readCardWs.value.send("读卡");
  });

  readCardWs.value.addEventListener("close", () => {
  });

  readCardWs.value.addEventListener("error", () => {
    readCardWs.value.close();
    useMessage().warning('读卡失败');
  });

  readCardWs.value.addEventListener("message", (message) => {
    if (message.data !== "Open!") {
      readCardWs.value.close();
      callback(message.data);
    }
  });
}
const searchData = () => {
  getCustomerData()
}

const readCard = () => {
  resetQuery()
  sendReadCard("ws://127.0.0.1:2018", (message) => {
    if (!JSON.parse(message).Data.IsSuccess) {
      useMessage().warning('读卡失败，请重试');
      return
    }
    let list = JSON.parse(message).Data.kh.split("|")
    queryForm.value.medicalCard = list[2]
    queryForm.value.icCard = list[1]
    getCustomerData()
  });
}

const getCustomerData = () => {
  getdoctorList()
  if (!queryForm.value.medicalCard && !queryForm.value.icCard) {
    useMessage().error('请输入社保卡号或身份证号');
    return
  }
  let obj = {}
  if (queryForm.value.medicalCard) {
    obj.medicalCard = queryForm.value.medicalCard
  }
  if (queryForm.value.icCard) {
    obj.icCard = queryForm.value.icCard
  }
  getCustomerByCard(obj).then((res) => {
    if (!res.data) {
      useMessage().error('未查询到数据');
      return
    }
    queryForm.value = res.data
    queryForm.value.customerId = res.data.id

    illnessViewRef.value.getData(queryForm.value)
    drugViewRef.value.getData(queryForm.value)
    roomViewRef.value.getData(queryForm.value)
    bloodViewRef.value.getData(queryForm.value)
    examViewRef.value.getData(queryForm.value)
  }).catch(() => {
    useMessage().error('未查询到数据');
  })
}

const resetQuery = () => {
  // 清空搜索条件
  queryForm.value = {
    medicalCard: '',
    icCard: '',
    name: '',
    age: '',
    birthday: '',
    sex: '',
    tel: '',
    address: '',
    village: '',
    healthStatus: '',
    familyDoctor: '',
    height: '',
    weight: '',
    bmi: '',
    diastolicPressure: '',
    systolicPressure: '',
    customerId: ''
  }
}
</script>


<style scoped lang="scss">
:deep(.el-form-item__label) {
  padding: 0;
}

:deep(.el-form.el-form--inline .el-form-item) {
  width: 100%;
}

:deep( .el-form.el-form--inline .el-form-item) {
  margin-right: 0;
}

:deep(.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type,.el-form-item--default) {
  margin-bottom: 10px !important;
}

:deep(.el-form-item--default) {
  margin-bottom: 10px !important;
}

:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: bold;
}
</style>
